Modern UI のようなフラットデザインを目指して使いづらくなっている件について

Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI ^*1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。

一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました ^*2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。

両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在に至るまでのトレンドとなっています。

Flat UI - 2013年のデザインのトレンド（？）

また、要素を削ぎ落としてミニマルに落ち着かせるということは、最終的に操作に必要な要素のみが残るために使い方が直感的に判る、余計な説明が要らないといった点でデザインを考える人達から憧れられているわけです。

Windows 8 をインストールしてみて…

ちなみに僕は1年半ほど前から Mac ユーザーではありますが、それまでは10年以上ずっと Windows ユーザーであり、今も会社での業務は全て Windows 環境で行なっています。そんな僕が Windows8 ではじめて Modern UI に触れて感じたのは、やはり使いづらいというものでした。僕個人だけが感じているのならまだしも、ネットを検索してみると似たような意見をもつ方が一定数存在するということが分かります。

もちろん Microsoft はワザと使いづらい UI を採用したわけではありません。今までにない斬新かつスタイリッシュで、これまでのどんな UI よりも使いやすいと信じて世に送り出したモノなのに、ユーザーにその想いが伝わりきれていない。そこには何らかの理由があると考え、僕なりに考察してみました。

Flat UI の落とし穴

Modern UI に見られる Flat UI の特徴

改めて Modern UI ならぬ Flat UI の特徴を洗い出してみます。

• グラデーションやドロップシャドウといったデザイン要素をなくす（※もしくはごく控えめの利用に留める）
• アイコンはリアリティあるものから、ピクトグラムのように書き込み量を最小限に抑える
• タイポグラフィデザインの手法を取り入れ、見出しから本文といったレイアウトのジャンプ率は、文字サイズとごく僅かな罫線のみで表現する

などなど、パッと思いつくところだとこんな感じでしょうか。ではこれらの特徴を考察すると同時に、そこに潜む落とし穴についても考えてみるとします。

リアリティあるデザインからピクトグラムへ

しかし僕達はものごとの本質だけを見て全てを識別出来るわけではありません。本質の周囲に漂っている補足情報をヒントとして同時に認識し、それら全てを踏まえて物事を識別しているわけです。ミニマル（単純）化したアイコンは、そういった補足情報の多くが削ぎ落とされているため、僕達はより少ない情報だけでそれが何であるのか識別しなくてはなりません。もちろん識別不可能ではありませんし、充分に可能ではありますが、少なからず脳への負担は高まり、それはストレスとなって蓄積されます。

タイポグラフィデザインの手法を取り入れ、ジャンプ率は極端な文字サイズで表現

そしてこれは Modern UI に限らず文字がアルファベットである国々ではごく一般的なことですが、罫線と呼ばれるものが殆ど使われていません。基本的に余白や行間の広さを調整することでジャンプ率を表現しています。表組みとなると、方眼紙のように縦横無尽に罫線が引かれるのを僕たち日本人は思い浮かべますが、海外の表組はヘッダーとボディを一本の線で区切るだけで、それ以外の線は無いというのも珍しくありません。過剰に線を引くよりもいかに余白を上手く調整して可読性を高めるかという思想が、彼らには遺伝子レベルで刷り込まれているのです。

Modern UI が使いづらい理由

見出し、本文、ラベル、ボタン、テキストインプットなどの区別がつきづらい

UI の大半がタイポグラフィのみで構成されているということは、それだけ各要素の差別化に制限が生まれることになります。例えば見出し、本文、そしてボタン。基本的に全てがただの文字列です。文字サイズ以外の違いが無いため、パッと見はすべて一つの段落であるかのような錯覚に陥ったりして、どこからどこまでがひとつのセクションなのか判断に困ることがあります。

ボタンに関しては、ベタ塗りの背景色や枠線などで矩形の領域を識別出来るようにはなっていますが、その矩形領域も非常にミニマルなデザインであるが故にテキストインプットのデザインと酷似しているため、一瞬ですがどちらなのか識別するために脳に負荷がかかります。

余白の取り方がアルファベット圏と日本語とでは違う

地味なところなのでデザインリテラシーの低い人はなかなか気付かないのですが、英語の文章と日本語の文章とでは行間の取り方が全く違います。英語の文章はアルファベットと数字と幾つかの記号だけと非常に種類が限られているので、普通に文章を書くだけでもそれとなく整然とした見栄えを演出することが出来ます。一文がスッキリしているので、あまり行間を広く取らなくても可読性は保てるんですよね。

一方の日本語ですが、平仮名、カタカナ、漢字、アルファベット、数字、記号と実にカオスな言語となっています。そのためタイポグラフィという見栄えの観点からすれば、どうしてもゴチャゴチャした印象になりがちです。結果として英文よりも行間を少しだけ広く取らないと可読性が損なわれてしまう訳です ^*3。

Modern UI は罫線やシャドウ、その他装飾といった補助を使わずに余白だけでセクション分けを実現するため、自然と余白が大きくなります。ただでさえ英文よりも余白を取らざるをえない日本語文をModern UI に流し込むと、更に余白を大きく取らなくてはならないため、ページのスクロールが増えるといった弊害が生まれます。かといって余白を英文基準のままにしておくと、行間が狭すぎて可読性が落ちるという弊害にぶち当たります。どの道不便ですね。アルファベット文化の人達には無い弊害が僕たち日本人にはあります。

おわりに

本音を言うと、タイポグラフィデザインには非常に強い憧れを抱いています。スタイリッシュかつユーザビリティの高い UI を作れるようになりたいとずっと考えています。映画トレインスポッティングを最初に観た時、その世界観はもちろんのこと、映像やタイポグラフィを主体としたポスターといったビジュアルが最高にクールに見えて、それがデザインを志すきっかけになったのだと考えています。

Modern UI はビジュアルデザインという視点から見れば、非常にスタイリッシュかつカッコイイものだと思いますし、僕の好みそのものです。しかしいくらスタイリッシュにしたところで、それは本当の意味での使いやすさに直結しないということを同時に気付かされた UI でもあります。

余談ですが、ニコニコ動画を Youtube 寄生型の頃から利用し続けていますが、現行のプレイヤーにはどうしても馴染めないでいるので、未だに旧バージョン（原宿）を使っています。iPhone アプリ版は正にスタイリッシュさとユーザビリティが上手く共存出来ていて、凄く好きなんですけどねぇ…。

脚注